<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>address_list</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }

        .nav-bar {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            height: 48px;
            border-bottom: 0.5px solid #e8e8e8;
            background: #fff;
        }

        .nav-bar-back {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: absolute;
            left: 16px;
        }

        .nav-bar-back-icon {
            width: 20px;
            height: 20px;
        }

        .nav-bar-back-text {
            font-size: 17px;
            color: #000;
        }

        .nav-bar-title {
            font-size: 17px;
            font-weight: 500;
            color: #000;
        }

        .address-list-item {
            margin: 15px 15px 0;
            position: relative;
            /* box-shadow: 0 0 10px #ddd; */
        }

        .address-list-item-inner {
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 4px;
            height: 106px;
            background-color: white;
        }

        .address-list-item-left {
            flex: 1;
            margin-left: 15px;
        }

        .address-list-item-right {
            justify-content: center;
            padding: 10px 15px;
        }

        .address-list-item-right-icon {
            width: 18px;
            height: 18px;
        }

        .address-list-def {
            width: 37px;
            height: 37px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .address-list-def-img {
            width: 100%;
            height: 100%;
        }

        .address-list-item-nav {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .address-list-item-name {
            font-size: 15px;
            color: #333333;
        }

        .address-list-item-phone {
            font-size: 14px;
            color: #777777;
        }

        .address-list-item-content {
            height: 50px;
            line-height: 25px;
            font-size: 15px;
            margin-top: 5px;
            color: #333333;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back">
                <img src="../images/back/back.png" alt="back"
                    class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">收货地址</span>
        </div>
        <div class="address-list">

        </div>
    </div>
</body>

<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    function back(){
        api.closeWin();
    }

    let addressList = [{
                def: 2,
                id: "1",
                name: "杨飞",
                phone: "15534212345",
                address: "北京北京市海淀区北太平庄街道北三环中路44号"
            }, {
                def: 1,
                id: "1",
                name: "杨飞",
                phone: "15534212345",
                address: "北京北京市海淀区北太平庄街道北三环中路44号"
            }]
    getOrderContent()
    function getOrderContent() {
        let str = '';
        addressList.forEach((item, index) => {
            str += `
            <div class="address-list-item" onclick="clickAddressItem('${item}', '${index}')">
                <div class="address-list-item-inner">
                    <div class="address-list-def">
                        ${item.def==1?' <img class="address-list-def-img" src="../images/linkImg/a3f48960e4ee7525559e1bdc57fe1935.png"/>':''}
                    </div>
                    <div class="address-list-item-left">
                        <div class="address-list-item-nav">
                            <span class="address-list-item-name">${'收货人：' + item.name}</span>
                            <span class="address-list-item-phone">${phoneHash(item.phone.toString())}</span>
                        </div>
                        <span class="address-list-item-content" data-index={index} data-id={item.id}>${'收货地址：'+ item.address}</span>
                    </div>
                    <div class="address-list-item-right" @click="editAddress('${item}', '${index}')">
                        <img class="address-list-item-right-icon" src="../images/main4/edit.png"/>
                    </div>
                </div>
            </div>
            `


        })
        document.querySelector('.address-list').innerHTML = str;
    }

    function phoneHash(phone){
        if(!phone){return ''}
        phone = phone.substring(0,3) + "****" + phone.substring(7);
        return phone;
    }

    function clickAddressItem(item, index) {
        api.openWin({
            name: 'edit_address',
            url:'./edit_address.html'
        })
    }



</script>

</html>